<script lang="ts" setup>
import { onMounted, reactive, ref } from 'vue'
import { useRoute, useRouter } from "vue-router"
const route: any = useRoute(); // 当前页面路由信息
const router = useRouter();
import axios from 'axios';
import Nav from "@/components/public/nav.vue"
// 顶部信息
const orderingList = ref([
  {
    key: '订单类型',
    value: '无',
  },
  {
    key: '订单状态',
    value: '无',
  },
  {
    key: '用户评价',
    value: '无',
  },
  {
    key: '信息类型',
    value: '无',
  },
  {
    key: '是否付费',
    value: '无',
  },
  {
    key: '付费金额',
    value: '无',
  },
]);

// 订单状态
let orderStatusObj = {
  0: {
    title: '支付中',
    type: 'primary',
  },
  1: {
    title: '进行中',
    type: 'primary',
  },
  2: {
    title: '已取消',
    type: 'danger',
  },
  3: {
    title: '已删除',
    type: 'danger',
  },
  4: {
    title: '已驳回',
    type: 'danger',
  },
  5: {
    title: '已通过',
    type: 'success',
  },
  6: {
    title: '已移交',
    type: 'success',
  },
  7: {
    title: 'vip待创建',
    type: 'warning',
  },
  8: {
    title: '超时',
    type: 'warning',
  },
};

/**
 * init 初始化方法入口
 * loading
 * inputList 动态输入框
 * manualList 操作日志
 */
const inputList = ref();
const loading = ref(false);
const manualList = ref([]);
let infor:any = ref({})
const type_infor = [
  "","普通信息","vip信息"
]
const init = async () => {
  const routeInfo = history.state.obj;
  infor.value = history.state.obj
  console.log(routeInfo,"routeInforouteInfo");
  
  // 订单类型
  orderingList.value[0].value = routeInfo.style == 1 ? '普通' : 'VIP';
  orderingList.value[1].value = orderStatusObj[routeInfo.status].title;
  orderingList.value[2].value = routeInfo.visit_appraise;
  orderingList.value[3].value = type_infor[routeInfo.style];
  orderingList.value[4].value = routeInfo.is_pay == 1 ? '是' : '否';
  orderingList.value[5].value = routeInfo.cheer_money ? routeInfo.cheer_money + '元' : '0元';

  // 日志
  // getTaskLogsMet();

  // 获取表单数据
  loading.value = true;
  axios
    .post('http://api.customer.form.bailingkeji.com/admin/record/detail', {
      filling_id: routeInfo.rpc_id,
    })
    .then((response) => {
      inputList.value = response.data.data.record;
      loading.value = false;
    });
};
onMounted(() => {
  init();
})
</script>
<template>
  <div class="main">
    <Nav />
    <div class="messageDetail">
      <!-- 详情顶部 -->
      <div class="informationo">
        <div class="infornumber">
          <div class="weave">
            信息编号：{{ infor?.no }}
          </div>
        </div>
        <!-- 订单信息 -->
        <div class="ordering">
          <div class="ordernumber" v-for="(item, index) in orderingList" :key="index">
            <span>{{ item.key }}:</span>
            <span>{{ item.value }}</span>
          </div>
        </div>
      </div>

      <!-- 输入框、日志展示 -->
      <div class="operate" v-loading="loading" element-loading-text="数据加载中。。。">
        <!-- 全部信息 -->
        <template v-if="inputList?.length">
          <div class="viewing">
            <div class="informationcont">
              <div class="informationcont_list" v-for="(item, index) in inputList" :key="index">
                <!-- 输入框 -->
                <template v-if="item.bank_info.type == 1">
                  <span class="fontwen">{{ item.bank_info.name }}:</span>
                  <el-input v-model="item.content" type="text" disabled />
                </template>
                <!-- 单选框 -->
                <template v-if="item.bank_info.type == 2">
                  <span class="fontwen">{{ item.bank_info.name }}:</span>
                  <el-radio-group v-model="item.content" class="ml-4" disabled>
                    <el-radio :label="itemRadio.option_text" size="large"
                      v-for="(itemRadio, indexRadio) in item.option_info" :key="indexRadio">
                      {{ itemRadio.option_text }}
                    </el-radio>
                  </el-radio-group>
                </template>
                <!-- 多选框 -->
                <template v-if="item.bank_info.type == 3">
                  <span class="fontwen">{{ item.bank_info.name }}:</span>
                  <el-checkbox-group v-model="item.option_id" disabled>
                    <el-checkbox :label="String(itemCheckbox.id)"
                      v-for="(itemCheckbox, indexCheckbox) in item.option_info" :key="indexCheckbox">
                      {{ String(itemCheckbox.option_text) }}
                    </el-checkbox>
                  </el-checkbox-group>
                </template>
                <!-- 日期 -->
                <template v-if="item.bank_info.type == 4">
                  <span class="fontwen">{{ item.bank_info.name }}:</span>
                  <template v-if="item.bank_info.check_date == 1">
                    <el-date-picker v-model="item.content" type="datetime" disabled placeholder="请选择"
                      value-format="YYYY-MM-DD HH:mm:ss" />
                  </template>
                  <template v-else-if="item.bank_info.check_date == 2">
                    <el-date-picker v-model="item.content" type="date" disabled placeholder="请选择"
                      value-format="YYYY-MM-DD" />
                  </template>
                  <template v-else-if="item.bank_info.check_date == 3">
                    <el-date-picker v-model="item.content" type="month" disabled placeholder="请选择"
                      value-format="YYYY-MM" />
                  </template>
                  <template v-else-if="item.bank_info.check_date == 4">
                    <el-date-picker popper-class="picker-dateNoneYear" v-model="item.content" placeholder="请选择"
                      type="date" disabled format="MM-DD" value-format="MM-DD" />
                  </template>
                </template>
                <!-- 时间、时长 -->
                <template v-if="item.bank_info.type == 5 || item.bank_info.type == 6">
                  <span class="fontwen">{{ item.bank_info.name }}:</span>
                  <template v-if="item.bank_info.check_date == 5">
                    <el-time-picker disabled v-model="item.content" placeholder="请选择" value-format="HH:mm:ss" />
                  </template>
                  <template v-if="item.bank_info.check_date == 6">
                    <el-time-picker disabled v-model="item.content" placeholder="请选择" value-format="HH:mm"
                      format="HH:mm" />
                  </template>
                  <template v-if="item.bank_info.check_date == 7">
                    <el-time-picker disabled v-model="item.content" value-format="mm:ss" format="mm:ss" :picker-options="{
                      selectableRange: '00:00:00 - 00:59:59',
                    }" popper-class="noneMinute" placeholder="请选择" />
                  </template>
                </template>
                <!-- 图片 -->
                <template v-if="item.bank_info.type == 7">
                  <span class="fontwen">{{ item.bank_info.name }}:</span>
                  <el-image disabled style="width: 100px; height: 100px" :src="item.file[0]" fit="cover" />
                </template>
                <!-- 文件 -->
                <template v-if="item.bank_info.type == 8">
                  <span class="fontwen">{{ item.bank_info.name }}:</span>
                  <el-upload style="
                    width: 80% !important;
                    line-height: 20px;
                    margin-top: -20px;
                  " disabled :file-list="[{ name: item.content }]" class="upload-demo"></el-upload>
                </template>
              </div>
            </div>
          </div>
        </template>
        <template v-else>
          <div class="viewing" style="text-align: center; line-height: 300px">
            暂无展示数据
          </div>
        </template>

        <!-- 操作记录 -->
        <template v-if="manualList.length">
          <div class="manual">
            <div class="pspan">操作记录</div>
            <div class="transfer">
              <div class="handover" v-for="(itempro, indexpro) in manualList" :key="indexpro">
                <span>{{ itempro.created_at }}</span>
                <div class="notes">
                  <p>
                    进行
                    <span>“{{ itempro.msg }}“</span>
                    操作
                  </p>
                </div>
              </div>
            </div>
          </div>
        </template>
        <template v-else>
          <div style="text-align: center; line-height: 245px" class="manual">
            暂无操作记录
          </div>
        </template>
      </div>

    </div>
  </div>
</template>
<style scoped lang="scss">
.main {
  display: flex;
}

.messageDetail {
  width: 100%;
  overflow-y: scroll;
  height: 100%;

  .informationo {
    width: 100%;
    height: 120px;
    border-bottom: 1px solid #3c3c3c;
    padding: 30px 20px 15px 56px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;

    .infornumber {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .weave {
        font-size: 25px;
        font-weight: bold;
      }
    }

    .ordering {
      display: flex;
      align-items: center;
      font-size: 14px;

      .ordernumber {
        margin-right: 30px;

        >span:nth-child(2) {
          margin-left: 10px;
        }
      }
    }
  }

  .operate {
    display: flex;
    min-height: 82.5%;

    .viewing {
      width: calc(100% - 380px);
      padding: 25px 56px;
      flex: 1;

      .informationcont {
        width: 700px;

        .informationcont_list {
          width: 100%;
          display: flex;
          align-items: center;
          margin-bottom: 20px;

          span {
            display: inline-block;
            width: 100px;
          }

          ::v-deep .el-input {
            width: 65% !important;
            height: 40px;
          }
        }
      }

      .fontwen {
        color: #262626;
        font-weight: 600;
      }

      .messarea,
      .labelBox {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        margin-bottom: 15px;

        .areadata,
        .labelBoxList {
          height: 30px;
          border: 1px solid #939393;
          margin: 20px 0 0 15px;
          border-radius: 15px;
          font-size: 13px;
          display: flex;
          align-items: center;
          justify-content: center;
          padding: 0 15px;
        }
      }
    }

    .manual {
      flex: 1;
      width: 380px;
      background-color: #efefef;
      border-left: 1px solid #666666;
      padding: 50px 46px;

      .pspan {
        font-size: 24px !important;
        font-weight: bold;
      }

      .transfer {
        .handover {
          width: 100%;
          display: flex;
          align-items: flex-start;
          margin-top: 20px;
          color: #262626;

          >span {
            white-space: nowrap;
            margin-right: 15px;
            font-size: 15px;
          }

          .notes {
            font-size: 13px;
            font-weight: 700;

            >p:nth-child(1) {
              font-size: 14px;
              margin-bottom: 10px;

              >span {
                color: #166ae0;
              }
            }
          }
        }
      }
    }
  }

  /*选择日期，年份的隐藏 */
  ::v-deep .picker-dateNoneYear {
    .el-date-picker__header {
      span:nth-child(3) {
        /*第三个标签是span的标签，把它隐藏*/
        display: none;
      }

      button:nth-child(1) {
        display: none;
      }

      button:nth-child(5) {
        display: none;
      }
    }
  }

  /*这个应该是隐藏小时的代码*/
  ::v-deep .noneMinute {
    .el-scrollbar:nth-of-type(1) {
      display: none;
    }

    .el-time-spinner {
      width: 150%;
      white-space: nowrap;
    }
  }
}
</style>
